<template>
  <div class="re-password">
    <v-title :title="$route.meta.title" is-center />
    <loading :show="loading" />
    <arrow />
    <div class="form shadow">
      <p>
        <label>旧密码:</label>
        <span>
          <cube-input type="password" v-model="postForm.old_password" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p>
        <label>新密码:</label>
        <span>
          <cube-input type="password" v-model="postForm.password" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p>
        <label>重复密码:</label>
        <span>
          <cube-input type="password" v-model="postForm.password2" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p class="submit">
        <span @click="save">保存</span>
      </p>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Loading from '@/components/Loading'
import Arrow from '@/components/Arrow'
import api from '@/api'
export default {
  name: 'RePassword',
  components: {
    'v-title': Title,
    Loading,
    Arrow
  },
  data() {
    return {
      loading: false,
      postForm: {}
    }
  },
  methods: {
    save() {
      const post = this.postForm
      if (!post.old_password || !post.password || !post.password2) {
        return this.$createToast({
          type: 'warn',
          txt: '请填写完整',
          time: 1000
        }).show()
      }
      // save
      this.loading = true
      api.User.changePassword({ ...this.postForm }).then(() => {
        this.$createToast({
          type: 'correct',
          txt: '修改完成',
          time: 1000,
          onTimeout: () => {
            this.$router.back()
          }
        }).show()
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.re-password
  padding-top 45px
  .form
    margin 20px
    padding 20px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 80px
        text-align right
        padding-right 10px
        font-weight 700
      //font-size 14px
      span
        flex 1
        padding-right 15px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px
</style>
